<template>
  <view class="su-date-picker">
    <view class="flex-between su-date-picker__handler" @click="showPopup=true">
      <view class="su-date-picker-value">
        <text v-if="innerVal">{{valueText}}</text>
        <text class="su-placeholder" v-else>{{placeholder}}</text>
      </view>
      <text class="iconfont icon-chahao" v-if="clearable && value"></text>
      <text class="iconfont icon-down-arrow-line f12"></text>
    </view>
    <u-datetime-picker :maxDate="maxDate" :minDate="minDate" :show="showPopup" v-model="innerVal" mode="date"  @confirm="dateChange"></u-datetime-picker>
  </view>
</template>

<script>
  export default {
    name: "su-date-picker",
    props: {
      value: {
        type: [String, Number],
        default: ''
      },
      maxDate: {
        type: [String, Number],
        default: Number(new Date()) + 1000 * 60 * 60 * 24 * 365 * 10
      },
      minDate: {
        type: [String, Number],
        default: Number(new Date()) - 1000 * 60 * 60 * 24 * 365 * 10
      },
      clearable:{
        type:Boolean,
        default:false
      },
      placeholder: {
        type: [String, Number],
        default: '请选择'
      }
    },
    data() {
      const defaultValue = this.value ? new Date(this.value).getTime() : ''
      return {
        innerVal:defaultValue,
        showPopup:false,
        valueText:this.value
      };
    },
    watch:{
      showPopup(val) {
        this.$store.commit('setPopupOpen', val)
      },
    },
    methods:{
      dateChange(e){
        console.log(e)
        this.showPopup = false
        let val = e.value
        let valObj = new Date(val)
        val = this.$util.formatDate(valObj,'yyyy/MM/dd')
        this.$emit('change',val)
        this.$emit('input',val)
        console.log(val)
        this.valueText = val
      }
    }
  }
</script>

<style lang="scss">
  .su-date-picker {
    width: 100%;
    &__handler{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .iconfont{
        color: #aaa;
      }
    }
    &-value{
      flex: 1;
      font-size: 32upx;
    }
    .icon-chahao{
      width: 36upx;
      height: 36upx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 40upx;
      background-color: rgba(0,0,0,0.2);
      color: #fff;
      font-size: 12upx;
      margin: 0 14upx;
    }
  }
</style>
